@use '../../util/popup' as popup;

.sx__date-picker-popup {
  @include popup.popup-base;

  background-color: var(--sx-color-background);
  color: var(--sx-internal-color-text);

  &.is-dark {
    background-color: var(--sx-color-surface-container-high);
  }

  $top-placement-bottom-value: calc(100% + 1rem);

  &.bottom-end {
    left: auto;
    right: 0;
    transform: translateX(0);
  }

  &.bottom-end[dir="rtl"] {
    right: auto;
    left: 0;
    transform: translateX(0);
  }

  &.bottom-start {
    left: 0;
    right: auto;
    transform: translateX(0);
  }

  &.bottom-start[dir="rtl"] {
    left: auto;
    right: 0;
    transform: translateX(0);
  }

  &.top-start {
    inset: auto auto $top-placement-bottom-value 0;
    transform: translateX(0);
  }

  &.top-end {
    inset: auto 0 $top-placement-bottom-value auto;
    transform: translateX(0);
  }
}
